<template>
	<view class="compose">
		<view class="navbar">
			<view class="nav_view">
				<view class="back" @click="deviceBack()">
					<image :src="`${baseImageUrl}/common/back.png`"></image>
					<view>合成</view>
				</view>
				<view class="money">
					<image :src="`${baseImageUrl}/common/gy.png`"></image>
					<text>{{silver}}</text>
				</view>
			</view>
		</view>
		<scroll-view scroll-y class="scroll_view">
			<image :src="`${baseImageUrl}/add/l2.png`" class="cover" v-if="is_have"></image>
			<image :src="`${baseImageUrl}/add/l1.png`" class="cover" v-else></image>
			<view class="select">
				<view class="select_box">
					<view class="number" @click="open(1)">
						<view class="view_item">
							<image :src="type_src"></image>
							<text>{{type_name}}</text>
						</view>
						<image :src="`${baseImageUrl}/kills/s1.png`"></image>
					</view>
					<view class="btn" @click="query_submit" v-if="value==9">{{text[advert_status]}}</view>
					<view class="btn" @click="submit" v-else>开始熔炼</view>
				</view>
			</view>
			<view class="parse_view">
				<view class="list">
					<view class="item" v-for="item in list">
						<view class="title">
							<image :src="item.logo"></image>
							<text>{{item.name}}</text>
						</view>
						<view class="desc">
							<text>{{item.synopsis}}</text>
							<!-- <text class="res_text">1级建筑</text> -->
						</view>
					</view>
					<!-- <view class="item">
						<view class="title">
							<image :src="`${baseImageUrl}/add/p2.png`"></image>
							<text>中级熔炉</text>
						</view>
						<view class="desc">
							<text>放入10个官银可随机获得对应职业的</text>
							<text class="res_text">1-3级建筑</text>
						</view>
					</view>
					<view class="item">
						<view class="title">
							<image :src="`${baseImageUrl}/add/p3.png`"></image>
							<text>高级熔炉</text>
						</view>
						<view class="desc">
							<text>放入20个官银+100积分，可随机获得对应职业的</text>
							<text class="res_text">1-6级建筑</text>
						</view>
					</view> -->
				</view>
				<!-- <u-parse :content="content" :previewImg="false"></u-parse> -->
			</view>
		</scroll-view>

		<u-popup :show="popup_show" bgColor="transparent" :mode="mode" :round="10" @close="close">
			<ComposeType :list="list" @change="change" @close="close" v-if="popup==1" />
			<ComposeResult :cover="cover" :name="name" @close="close" v-if="popup==2" />
		</u-popup>
	</view>
</template>

<script>
	import {
		back_url,
		baseImageUrl,
		captchaAppId
	} from "@/utils/config.js";
	import {
		userInfo,
		userAlchemyGet,
		userAlchemy,
		advertCan
	} from '@/request/api.js';
	import ComposeType from '@/components/home/ComposeType.vue';
	import ComposeResult from '@/components/home/ComposeResult.vue';
	export default {
		components: {
			ComposeType,
			ComposeResult
		},
		data() {
			return {
				silver: "",
				content: "22",
				is_have: false,

				order_id: "",
				mode: "bottom",
				popup_show: false,
				popup: 1,

				list: [],

				type_src: "",
				type_name: "",
				value: "",

				cover: "",
				name: "",

				advert_status: "",
				text: {
					0: "看广告,领熔炼!",
					1: "免费领取",
					2: "今日已领取"
				},
			}
		},
		async onLoad() {
			let {
				alchemy,
				silver
			} = await userAlchemyGet();
			this.silver = silver;
			this.list = alchemy;
			let item = this.list[0];
			this.type_src = item.logo;
			this.type_name = item.name;
			this.value = item.id;
		},
		onShow() {
			this.get_status();
		},
		methods: {
			deviceBack(number) {
				let routes = getCurrentPages();
				let url = routes[routes.length - 1].route;
				if (back_url.includes(url)) {
					let number = this.$store.state.tabbarIndex;
					this.redirectRouter(number);
				} else {
					this.backRouter();
				}
			},
			async get_status() {
				let {
					advert_status
				} = await userAlchemyGet();
				this.advert_status = advert_status;
			},
			async getSilver() {
				let {
					silver
				} = await userAlchemyGet();
				this.silver = silver;
			},
			open(index, mode) {
				this.mode = mode ?? "bottom";
				this.popup = index;
				this.popup_show = true;
			},
			close() {
				this.popup_show = false;
			},
			change(item) {
				this.type_src = item.logo;
				this.type_name = item.name;
				this.value = item.id;
				this.close();
				if (item.id == 9) {
					this.get_status();
				}
			},
			async submit() {
				this.is_have = true;
				let {
					product_name,
					product_img,
					industry_level
				} = await userAlchemy({
					level: this.value
				});
				if (this.value == 9) {
					this.get_status();
				}
				if (industry_level == 0) {
					this.$u.toast("未获取建筑物");
					return false;
				}
				this.cover = product_img;
				this.name = product_name;
				this.getSilver();
				setTimeout(() => {
					this.open(2, 'center');
					this.is_have = false;
				}, 3 * 1000);
			},
			query_submit() {
				let advert_status = this.advert_status;
				if (advert_status == 0) {
					uni.$u.throttle(() => {
						this.navigate(4);
					}, 3000);
				}
				if (advert_status == 1) {
					this.submit();
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.compose {
		position: relative;

		.navbar {
			width: 100%;
			height: $navbarHeight;
			padding: 0 14rpx 12rpx;
			box-sizing: border-box;
			background: url(#{$baseImageUrl}/kills/nav.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			position: absolute;
			z-index: 99999;

			.nav_view {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.back {
					display: flex;
					align-items: center;

					image {
						width: 62rpx;
						height: 31rpx;
					}

					view {
						color: #FFFFFF;
						font-size: 36rpx;
						font-weight: 400;
						font-family: LiSu;
					}
				}

				.money {
					min-width: 154rpx;
					height: 36rpx;
					background: #37302A;
					display: flex;
					align-items: center;
					position: relative;

					image {
						width: 42rpx;
						height: 42rpx;
						position: absolute;
						left: -21rpx;
						top: -3rpx;
					}

					text {
						color: #FFFEFE;
						font-size: 30rpx;
						font-weight: 400;
						padding-left: 38rpx;
						box-sizing: border-box;
					}
				}
			}
		}

		.scroll_view {
			height: 1624rpx;
			padding-top: 260rpx;
			box-sizing: border-box;
			background: url(#{$baseImageUrl}/add/c1.png) no-repeat;
			background-size: 100% 100%;

			.cover {
				width: 100%;
				height: 800rpx;
			}

			.select {
				height: 140rpx;
				margin-bottom: 38rpx;
				padding: 0 70rpx;
				box-sizing: border-box;
				position: relative;

				.select_box {
					width: 100%;
					height: 140rpx;
					position: relative;
					z-index: 2;

					.number {
						width: 260rpx;
						height: 140rpx;
						padding: 0 46rpx 0 32rpx;
						box-sizing: border-box;
						background: url(#{$baseImageUrl}/kills/btn3.png) no-repeat;
						background-size: 100% 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: absolute;
						top: 0;
						z-index: 2;

						.view_item {
							display: flex;
							align-items: center;

							image {
								width: 42rpx;
								height: 42rpx;
								border-radius: 50%;
							}

							text {
								color: #FFFFFF;
								font-size: 36rpx;
								font-weight: 400;
								padding-left: 10rpx;
								box-sizing: border-box;
							}
						}

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.btn {
						width: 370rpx;
						height: 140rpx;
						line-height: 1;
						text-align: center;
						color: #FFFFFF;
						font-size: 36rpx;
						font-weight: 400;
						padding-top: 50rpx;
						box-sizing: border-box;
						background: url(#{$baseImageUrl}/kills/btn4.png) no-repeat;
						background-size: 100% 100%;
						position: absolute;
						right: 0rpx;
						top: 0;
					}
				}
			}

			.parse_view {
				color: #fff;
				font-size: 32rpx;
				font-weight: 400;
				font-family: SimSun;
				padding: 0 26rpx;
				box-sizing: border-box;

				.list {
					width: 100%;
					// height: 390rpx;
					padding-top: 30rpx;
					padding-left: 30rpx;
					box-sizing: border-box;
					background: url(#{$baseImageUrl}/add/bg4.png) no-repeat;
					background-size: 100% 100%;

					.item {
						padding-bottom: 30rpx;
						box-sizing: border-box;

						.title {
							padding-bottom: 10rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;

							image {
								width: 50rpx;
								height: 50rpx;
								border-radius: 50%;
							}

							text {
								color: #494338;
								font-size: 30rpx;
								font-weight: 400;
								font-family: LiSu;
								padding-left: 10rpx;
								box-sizing: border-box;
							}
						}

						.desc {
							color: #494338;
							font-size: 24rpx;
							font-weight: 400;
							font-family: SimSun;
							padding-left: 10rpx;
							box-sizing: border-box;

							.res_text {
								color: #452D11;
								font-size: 24rpx;
								font-weight: 400;
								font-family: SimSun;
								padding-left: 16rpx;
								box-sizing: border-box;
							}
						}
					}
				}
			}
		}
	}
</style>